<template>
  <div class="index-page">
      <div class="banner-top">
        <div class="text-box">
          <h2 class="title">可信工作证</h2>
          <p class="tip">由企业单位签发给成员的可信身份凭证</p>
          <p class="text">可信工作证是依托国家“互联网+”可信身份认证平台与公信.中国主体核验技术，为企业单位及其从业人员提供权威、安全、便捷、可信的在线身份认证与识别服务</p>
        </div>
      </div>

      <div class="pain-points">
          <h2 class="common-title">我们解决企业什么痛点？</h2>
          <div class="points-box clearfix">
              <div class="line-x"></div>
              <div class="line-y"></div>
              <div class="gou"></div>
              <div class="item">
                  <img class="num1" src="../../assets/img/01.png" alt="">
                  <p class="text ">解决证件制作成本高，发证后无法变更信息的困扰</p>
              </div>
              <div class="item">
                  <img class="num2" src="../../assets/img/02.png" alt="">
                  <p class="text ">解决发证过程中，人证不一，无法异地领证的问题</p>
              </div>
              <div class="item">
                  <img class="num3" src="../../assets/img/03.png" alt="">
                  <p class="text ">解决无法甄别个人社会治安背景所产生的安全隐患</p>
              </div>
              <div class="item">
                  <img class="num4" src="../../assets/img/04.png" alt="">
                  <p class="text ">实现个人与组织关系证件的灵活制作与发放管理</p>
              </div>
          </div>

          <div class="bottom-title flexbox flexbox-middle flexbox-center">为企业降本增效，传递信任</div>
      </div>

      <div class="new-point">
          <h2 class="common-title">新一代电子工作证</h2>
          <p class="small-title">高效、可靠的证件签发管理能力，大幅降低制证、领证成本</p>
          <ul class="new-point-list">
          	<li class="item flexbox">
               <div class="icon1"></div>
               <div class="datas flexchild">
                   <h4>证件签发灵活高效</h4>
                   <p>多样化的证件模板与灵活的发证方式设置证照内容可随时变更，不受制证条件限制</p>
               </div>
            </li>
            <li class="item flexbox">
               <div class="icon2"></div>
               <div class="datas flexchild">
                   <h4>证件领用便捷可靠</h4>
                   <p>不受地域时间限制，无需现场发证与领证人证比对，保障领证人的身份真实、可靠</p>
               </div>
            </li>

            <li class="item flexbox">
               <div class="icon3"></div>
               <div class="datas flexchild">
                   <h4>证件识别安全可信</h4>
                   <p>法定证件制证数据与企业授信构建可信凭证多信任层级认证，脱敏识别持证人有效身份</p>
               </div>
            </li>
          </ul>
      </div>

      <div class="product-point">
          <h2 class="common-title">产品功能</h2>
          <ul class="product-point-list clearfix">
              <li class="item">
                   <div class="box">
                     <img class="icon4" src="../../assets/img/icon-4.png" alt="">
                     <h4>邀请申领</h4>
                     <p>提供证件申领模板，由申领人提报证件信息，审批通过后签发电子工作证</p>
                   </div>
              </li>

              <li class="item">
                   <div class="box">
                     <img class="icon5" src="../../assets/img/icon-5.png" alt="">
                     <h4>批量发证</h4>
                     <p>采集发证对象个人信息，导入制证系统批量生成电子工作证并通知领证</p>
                   </div>
              </li>

              <li class="item">
                   <div class="box">
                     <img class="icon6" src="../../assets/img/icon-6.png" alt="">
                     <h4>扫码领证</h4>
                     <p>领证人员无需现场操作，手机扫码验明身份后即可快速领取电子工作证</p>
                   </div>
              </li>

              <li class="item">
                   <div class="box">
                     <img class="icon7" src="../../assets/img/icon-7.png" alt="">
                     <h4>限时管理</h4>
                     <p>可配置证件的领用时间和证件生效时间，系统自动开启或关闭证件有效性</p>
                   </div>
              </li>

              <li class="item">
                   <div class="box">
                     <img class="icon8" src="../../assets/img/icon-8.png" alt="">
                     <h4>电子签章</h4>
                     <p>签发成功的电子工作证自动加盖签发单位的可信电子公章，并可一键验签</p>
                   </div>
              </li>

              <li class="item">
                   <div class="box">
                     <img class="icon9" src="../../assets/img/icon-9.png" alt="">
                     <h4>证件照管理</h4>
                     <p>支持更换证件照片，更换时须通过人像核验，以确保证照一致，人证合一</p>
                   </div>
              </li>
          </ul>
      </div>


      <div class="process-box">
          <h2 class="common-title">应用流程</h2>
      </div>


      <div class="product-point advantage-box">
          <h2 class="common-title">产品优势</h2>
          <ul class="product-point-list clearfix">
            <li class="item">
                 <div class="box">
                   <img class="icon11" src="../../assets/img/icon-11.png" alt="">
                   <h4>权威</h4>
                   <p>统一使用法定身份证件制证数据作为比对源，由合法电子认证机构签发数字证书，确保签发证件的权威有效</p>
                 </div>
            </li>
            <li class="item">
                 <div class="box">
                   <img class="icon13" src="../../assets/img/icon-13.png" alt="">
                   <h4>安全</h4>
                   <p>更符合智能终端应用的公钥体制，没有存储介质要求，遗失后不会造成隐私泄漏，避免了盗用和冒用风险</p>
                 </div>
            </li>

            <li class="item">
                 <div class="box">
                   <img class="icon10" src="../../assets/img/icon-10.png" alt="">
                   <h4>便捷</h4>
                   <p>结合个人身份与组织授权关系，形成多信任层级认证，更符合互联网应用要求，贴合工作证明应用习惯</p>
                 </div>
            </li>

              <li class="item">
                   <div class="box">
                     <img class="icon12" src="../../assets/img/icon-12.png" alt="">
                     <h4>可信</h4>
                     <p>依托于国家“互联网+”可信身份认证平台与公信.中国企业主体的权威数据与安全核验技术，确保自然人与法人认证可信</p>
                   </div>
              </li>



          </ul>
      </div>

      <div class="new-point">
          <h2 class="common-title">行业方案</h2>
          <ul class="new-point-list">
          	<li class="item flexbox">
               <img class="icon14" src="../../assets/img/icon-14.png" alt="">
               <div class="datas flexchild">
                   <h4>灵活用工</h4>
                   <p>为外部员工远程签发《临时工作证》，可根据需要灵活设置工作证的展示信息、证件有效期等，以提升对灵活用工人员的管理水平</p>
               </div>
            </li>
            <li class="item flexbox">
               <img class="icon15" src="../../assets/img/icon-15.png" alt="">
               <div class="datas flexchild">
                   <h4>家政服务</h4>
                   <p>为家政服务人员签发并设置《上门服务工作证》及使用期限，供消费者验证上门人员的身份和服务时效，提升消费者的安全感与信任感</p>
               </div>
            </li>

            <li class="item flexbox">
               <img class="icon16" src="../../assets/img/icon-16.png" alt="">
               <div class="datas flexchild">
                   <h4>展会展览</h4>
                   <p>对参展单位指派的参展人员远程签发《电子参展证》，在线领用，现场出示，大幅降低证件的制作成本，提高证件派发效率和安全性</p>
               </div>
            </li>

            <li class="item flexbox">
               <img class="icon17" src="../../assets/img/icon-17.png" alt="">
               <div class="datas flexchild">
                   <h4>建筑工程</h4>
                   <p>为施工现场的临时施工、帮工人员远程签发《施工现场临时出入证》，现场核验领证人身份及安全属性，快速排查可疑人员</p>
               </div>
            </li>

          </ul>
      </div>


      <van-popup class="code-alert" v-model="show">
        <h5>可信工作证小程序</h5>
        <p class="tip">为企业传递可信形象</p>
        <img src="../../assets/img/code.png" alt="">
        <p class="scan-tip">扫码进入小程序</p>
        <p class="save-tip">长按保存图片</p>
      </van-popup>


      <div class="experience-box">
          <h2 class="common-title">为企业传递可信形象</h2>
          <a href="javascript:;" @click="handletest" class="experience-btn">立即体验</a>
      </div>

  </div>
</template>
<script>
  import wx from 'weixin-js-sdk'
  export default {
    data() {
      return {
          show: false
      };
    },
    methods: {
      handletest() {
        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            wx.miniProgram.reLaunch({url: '/pages/index/index'})
        } else {
           this.show = true
        }

      },
    },
  };
</script>

<style scoped lang='less'>
  @import './index.less';
</style>
